<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <router-link class="mui-pull-right mui-btn-link send" :to="{path: '/profile/billings'}">账单明细</router-link>
      </header>
      <div class="bill-top mui-text-center">
        <div class="bg bg-cir-l"></div>
        <div class="bg bg-cir-r"></div>
        <div class="bill-inner">
          <h2 class="balance">{{balance}}</h2>
          <p class="b-label">余额</p>
          <div class="btn-row">
            <button type="button" class="btn-charge" @tap="recharge">充值</button>
          </div>
          <div class="btn-row">
            <button type="button" class="btn-withdraw" @tap="withdraw">提现</button>
          </div>
        </div>
      </div>
      <div class="recent-bill">
        <h4>最近交易</h4>
        <ul>
          <li class="bill-list" v-for="item in recentBill" :key="item.id">
            <a href="javascript:" class="flex-bt">
              <div class="bill-l">
                <p class="g-name" v-text="`${item.msg}`"></p>
                <span class="g-time" v-text="item.create_time">2018-04-09 14:09</span>
              </div>
              <div class="bill-r">
                <!-- <span v-if="item.payType === 1" class="in" v-text="`+￥${item.gold}`">+￥0.00</span> -->
                <span class="out" v-text="`￥${item.gold}`">+￥0.00</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </transition>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "billing-center",
    data () {
      return {
        recentBill: [
          // {
          //   id: '1',
          //   type: '购物',
          //   name: '鲜花',
          //   total: '100',
          //   payType: 1,
          //   time: '2018-12-12 12:12'
          // },
          // {
          //   id: '2',
          //   type: '动态',
          //   name: '打赏',
          //   total: '60',
          //   payType: 2,
          //   time: '2018-12-12 12:12'
          // }
        ],
        balance: 0
      }
    },
    methods: {
      recharge () {
        this.$router.push({path: '/profile/recharge'})
      },
      withdraw () {
        this.$router.push({path: '/profile/withdraw'})
      }
    },
    created(){
      let self = this;
      MH_API.getBillList({}).then(res => {
        if (res.status === 200) {
          self.recentBill = res.data;
        }
      })
      //余额
      MH_API.getBalance({}).then(res => {
        if (res.status === 200) {
          self.balance = res.data.gold;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .mui-bar {
    background:transparent;
    color: #fff;
    a {color: #fff;}
    .mui-btn-link {color: #fff;}
  }
  .bill-top {
    position: relative;
    width: 100%;
    padding: 6.25rem 2.25rem 2.25rem;
    background: #f26c60;
    color: #fff;
    overflow-x: hidden;
    .balance {
      font-size: 3.6rem;
    }
    .b-label {
      margin: 2.4rem 0;
      @include sc(1.8rem, #fff);
    }
    button {
      padding: 1rem 6.6rem;
      margin-bottom: .8rem;
      border-radius: .5rem;
    }
    .btn-charge {
      background-color: #fff;
      @include sc(1.5rem, #f26c60);
      box-shadow: .2rem .2rem .5rem rgba(0,0,0,.1);
    }
    .btn-withdraw {
      background: transparent;
      color: #fff;
      border: 1px solid #fff;
    }
    .bg {
      position: absolute;
      width: 13.5rem;
      height: 13.5rem;
      background: linear-gradient(180deg, #fff 0%, #f48379 100%);
      opacity: .1;
      border-radius: 100%;
    }
    .bg-cir-l {
      top: 9rem;
      left: -9rem;
    }
    .bg-cir-r {
      top: -1rem;
      right: -7rem;
    }
  }
  .recent-bill {
    background-color: #fff;
    h4 {
      padding: 1.5rem 1rem;
      @include sc(1.6rem, #666);
      border-bottom: 1px solid #eee;
    }
    .bill-list {
      padding: 1.5rem 1rem;
      border-bottom: 1px solid #eee;
    }
    .g-name {@include sc(1.5rem, #333);}
    .g-time {@include sc(1.2rem, #999);}
    .out {@include sc(1.8rem, #f9625d);}
    .in {@include sc(1.8rem, #333);}
  }

</style>
